import { getConsumeRecordList, getPayRecordList, getRefundRecordList } from '@/apis/wallet'
import { storage } from '@/store/sessionStorage'
import { WALLET_RECORD_TYPE } from '@/utils/config'
import { BasicData } from '@/utils/basicData'
import { onMounted, reactive, ref } from 'vue'

interface itemType {
    time: string
    price: string
    give: boolean
    storeStatus?: number
    payType?: number
}

export class WalletRecord extends BasicData {
    tabList = reactive(['消费', '充值', '退款'])
    consumeList: itemType[] = reactive([])
    consumeNone = ref(false)
    payList: itemType[] = reactive([])
    payNone = ref(false)
    refundList: itemType[] = reactive([])
    refundNone = ref(false)
    type = ref(WALLET_RECORD_TYPE[0])
    //下拉加载loading
    refreshLoading = ref(false)
    //加载数据loading
    dataLoading = ref(false)
    dataFinished = ref(false)
    selectIndex = ref(0)
    //payPage
    payPagination: any = reactive({
        pageNo: 1,
        pageSize: 10,
        total: 0
    })
    //refundPage
    refundPagination: any = reactive({
        pageNo: 1,
        pageSize: 10,
        total: 0
    })
    //consumePage
    consumePagination: any = reactive({
        pageNo: 1,
        pageSize: 10,
        total: 0
    })

    //用户信息
    userInfo: any = reactive({})
    mainContent: any
    constructor() {
        super()
        this.userInfo = storage.get('userInfo') ? JSON.parse(storage.get('userInfo')) : null
        onMounted(() => {
            this.mainContent = document.querySelector('.list-main') as HTMLElement
        })
    }
    //刷新页面
    onRefresh = () => {
        this.reset(true)
        this.queryRecordList(this.selectIndex.value, true)
    }

    //监听选择查看列表
    onSelect = (index: number) => {
        this.type.value = WALLET_RECORD_TYPE[index]
        this.selectIndex.value = index
        this.mainContent.scrollTop = 0
        this.reset()
        this.queryRecordList(index)
    }

    reset = (isRefresh = false) => {
        this.dataFinished.value = false
        this.dataLoading.value = true
        this.consumePagination.pageNo = 1
        this.payPagination.pageNo = 1
        this.refundPagination.pageNo = 1
        if (!isRefresh) {
            this.consumeList.length = 0
            this.payList.length = 0
            this.refundList.length = 0
        }
    }
    queryRecordList = (index: number, isRefresh = false) => {
        if (index === 0) {
            //获取消费记录
            getConsumeRecordList({
                current: this.consumePagination.pageNo,
                size: this.consumePagination.pageSize,
                companyId: this.userInfo.companyId
            }).then((res: any) => {
                this.resultDispose(isRefresh, res, index)
            })
        } else if (index === 1) {
            //获取充值记录
            getPayRecordList({ current: this.payPagination.pageNo, size: this.payPagination.pageSize }).then(
                (res: any) => {
                    this.resultDispose(isRefresh, res, index)
                }
            )
        } else if (index === 2) {
            //获取退款记录
            getRefundRecordList({ current: this.refundPagination.pageNo, size: this.refundPagination.pageSize }).then(
                (res: any) => {
                    this.resultDispose(isRefresh, res, index)
                }
            )
        }
    }
    //加载数据
    timer: any
    onLoad = () => {
        this.timer = setTimeout(
            () => {
                this.queryRecordList(this.selectIndex.value)
                if (this.timer) clearTimeout(this.timer)
            },
            this.timer ? 400 : 0
        )
    }

    finish = (len: number, total: number) => {
        // 数据全部加载完成
        if (len >= total) {
            this.dataFinished.value = true
        }
    }

    resultDispose = (isRefresh: boolean, res: any, index: number) => {
        if (this.refreshLoading.value) {
            this.refreshLoading.value = false
        }
        // 加载状态结束
        this.dataLoading.value = false
        if (res.data.value === 200) {
            this.dataDispose(isRefresh, res, index)
            console.log('刷新', isRefresh)
        } else {
            this.dataFinished.value = true
        }
    }

    dataDispose = (isRefresh = false, res: any, index: number) => {
        if (isRefresh) {
            //刷新时，页面滚动到顶部
            const ele = document.querySelector('.van-list-container') as HTMLElement
            ele.scrollTop = 0
        }
        if (index === 0) {
            if (isRefresh) {
                this.consumeList.length = 0
            }
            res.data.data.records.forEach((item: any) => {
                this.consumeList.push({
                    time: item.createTime,
                    price: item.amount,
                    give: false,
                    payType: item.payType //1.微信 2.储值扣费 3.储值赠送 4.系统赠送
                })
            })
            this.consumePagination.pageNo += 1
            this.finish(this.consumeList.length, res.data.data.total)
            console.log('start', this.consumeList.length)
            this.consumeNone.value = this.consumeList.length ? false : true
        } else if (index === 1) {
            if (isRefresh) {
                this.payList.length = 0
            }
            res.data.data.records.forEach((item: any) => {
                this.payList.push({
                    time: item.payTime ? item.payTime : item.createDay,
                    price: item.amount,
                    give: false,
                    storeStatus: item.storeStatus //0.待付款；1.已完成；2.已关闭 3
                })
            })
            this.payPagination.pageNo += 1
            this.finish(this.payList.length, res.data.data.total)
            this.payNone.value = this.payList.length ? false : true
        } else if (index === 2) {
            if (isRefresh) {
                this.refundList.length = 0
            }
            res.data.data.records.forEach((item: any) => {
                this.refundList.push({
                    time: item.createTime,
                    price: item.refundAmount,
                    give: false
                })
            })
            this.refundPagination.pageNo += 1
            this.finish(this.refundList.length, res.data.data.total)
            this.refundNone.value = this.refundList.length ? false : true
        }
    }
}
